<template>
  <div style="width: 100%; height: 100%; position: relative">
    <div class="map-loader" v-if="loading">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="loader">
        <g stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" fill="none" stroke-width="1" stroke="none">
          <line y2="6" x2="24" y1="2" x1="24"></line>
          <line transform="translate(34, 6.679) rotate(30) translate(-34, -6.679)" y2="8.679" x2="34" y1="4.679" x1="34"></line>
          <line transform="translate(41.321, 14) rotate(60) translate(-41.321, -14)" y2="16" x2="41.321" y1="12" x1="41.321"></line>
          <line transform="translate(44, 24) rotate(90) translate(-44, -24)" y2="26" x2="44" y1="22" x1="44"></line>
          <line transform="translate(41.321, 34) rotate(120) translate(-41.321, -34)" y2="36" x2="41.321" y1="32" x1="41.321"></line>
          <line transform="translate(34, 41.321) rotate(150) translate(-34, -41.321)" y2="43.321" x2="34" y1="39.321" x1="34"></line>
          <line transform="translate(24, 44) rotate(180) translate(-24, -44)" y2="46" x2="24" y1="42" x1="24"></line>
          <line transform="translate(14, 41.321) rotate(210) translate(-14, -41.321)" y2="43.321" x2="14" y1="39.321" x1="14"></line>
          <line transform="translate(6.679, 34) rotate(240) translate(-6.679, -34)" y2="36" x2="6.679" y1="32" x1="6.679"></line>
          <line transform="translate(4, 24) rotate(270) translate(-4, -24)" y2="26" x2="4" y1="22" x1="4"></line>
          <line transform="translate(6.679, 14) rotate(300) translate(-6.679, -14)" y2="16" x2="6.679" y1="12" x1="6.679"></line>
          <line transform="translate(14, 6.679) rotate(330) translate(-14, -6.679)" y2="8.679" x2="14" y1="4.679" x1="14"></line>
        </g>
      </svg>
      <div>地图加载中...</div>
    </div>
    <div class="map-container" ref="mapCharts"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import 'echarts-gl';
import { log } from 'util';

const loading = ref(false);
const featchNum = ref(0);
const activeCity = ref('全国');

const mapCharts = ref<HTMLDivElement | null>(null);
let chartInstance: echarts.ECharts | null = null;

const generateFlyLines = () => {
  const beijing = [116.405285, 39.904989];
  const cities = [
    [121.472644, 31.231706], // 上海
    [113.280637, 23.125178], // 广州
    [114.085947, 22.547], // 深圳
    [104.065735, 30.659462], // 成都
    [120.153576, 30.287459], // 杭州
    [114.298572, 30.584355] // 武汉
  ];

  return cities.map((city) => ({
    coords: [beijing, city],
    lineStyle: {
      color: '#00ffb3',
      width: 2,
      opacity: 0.6,
      curveness: 0.3
    }
  }));
};

const updateChart = () => {
  if (!mapCharts.value) return;

  if (!chartInstance) {
    const flyLineData = generateFlyLines();

    const chartInstance = echarts.init(mapCharts.value, 'macarons');
    const option = {
      // tooltip: {
      //   trigger: 'item',
      //   formatter: '{b}<br/>点击查看详情',
      //   backgroundColor: 'rgba(7, 29, 66, 0.8)',
      //   borderColor: 'rgba(0, 255, 179, 0.3)',
      //   textStyle: { color: '#fff' }
      // },
      geo: {
        map: 'china',
        roam: true,
        center: [105, 35],
        zoom: 1.6,
        scaleLimit: {
          min: 1.2,
          max: 15
        },
        label: {
          show: true,
          color: '#fff',
          fontSize: 10
        },
        itemStyle: {
          areaColor: 'rgba(17, 70, 118, 0.8)',
          borderColor: '#03c782',
          borderWidth: 1.5
        },
        emphasis: {
          itemStyle: {
            areaColor: '#1a5c94',
            shadowColor: '#00ffb3',
            shadowBlur: 20
          },
          label: {
            show: true,
            color: '#fff'
          }
        }
      },
      series: [
        // {
        //   name: '数据连接',
        //   type: 'lines',
        //   coordinateSystem: 'geo',
        //   zlevel: 3,
        //   effect: {
        //     show: true,
        //     period: 6,
        //     trailLength: 0.7,
        //     color: '#00ffb3',
        //     symbolSize: 3
        //   },
        //   lineStyle: {
        //     color: '#00ffb3',
        //     width: 1,
        //     opacity: 0.6,
        //     curveness: 0.3
        //   },
        //   data: flyLineData
        // }
      ]
    };
    chartInstance.setOption(option);
    window.addEventListener('resize', () => chartInstance?.resize());

    // 清除所有高亮
    // chartInstance.dispatchAction({
    //   type: 'downplay',
    //   seriesIndex: 0
    // });

    chartInstance.on('click', function (e) {
      console.log('Clicked city:', e);
    });

    // 如果有选中城市且不是"全国"，则设置高亮
    if (activeCity.value && activeCity.value !== '全国') {
      chartInstance.dispatchAction({
        type: 'highlight',
        name: activeCity.value
      });
    }
  }
};

const loadData = async () => {
  loading.value = true;
  try {
    const response = await fetch('/assets/chinaMapJson/china.json');
    const chinaJson = await response.json();
    echarts.registerMap('china', chinaJson);
    updateChart();
    loading.value = false;
  } catch (error) {
    console.error('地图数据加载失败:', error);
    if (featchNum.value < 5) {
      setTimeout(() => {
        loadData();
      }, 1000);
    }
  } finally {
    loading.value = false;
    featchNum.value++;
    if (featchNum.value >= 5) {
      return;
    }
  }
};

onMounted(() => {
  if (chartInstance) {
    chartInstance.dispose();
    window.removeEventListener('resize', () => chartInstance?.resize());
  }

  loadData();
});
</script>

<style scoped lang="scss">
.map-container {
  width: 100%;
  height: 100%;
}

.map-loader {
  width: 100%;
  height: 100%;
  color: var(--el-color-primary);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.loader {
  width: 48px;
  height: 48px;
  transform: rotate(0deg);
  animation: spin 2.4s linear infinite;
  margin-bottom: 15px;
}

.loader line {
  stroke: var(--el-color-primary);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 10;
  stroke-dashoffset: 10;
  animation: dash 2.4s ease-in-out infinite;
}

@keyframes dash {
  0% {
    stroke-dashoffset: 10;
    opacity: 1;
  }
  50% {
    stroke-dashoffset: 0;
    opacity: 0.6;
  }
  100% {
    stroke-dashoffset: 10;
    opacity: 1;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
